$bgColor:#fff;//键盘默认背景色
$color:#000;//键盘默认字体颜色
$ativeColor:#00ff21;//键盘选中背景色
$errorColor:#ff0021;//键盘匹配错误的背景色
$bgShadow:#888;//键盘默认阴影颜色
$waitPractice:#00c2ff;//提示区待输入键盘背景色
$lineHeight:#fff;  //特效高光的颜色
$lineHeightShadow:#d0d0d0;

$bgColor2:#000;
$bgShadow2:#a0913d;
$color2:#a0913d;
$lineHeight2:#484848;
$lineHeightShadow2:#ebe7d5;
$ativeColor2:#00ff21;
$width:50px;
$height:50px;


$bgColor:$bgColor2;
$color:$color2;
$ativeColor:$ativeColor2;
$bgShadow:$bgShadow2;
$lineHeight:$lineHeight2;
$lineHeightShadow:$lineHeightShadow2;

@mixin border-radius($radius) {
  border-radius: $radius;
}
@mixin width($multiple) {
    width: $multiple*$width!important;
    line-height: 50px;
}
*{
    padding: 0;
    margin: 0;
}


//调整模式
//默认模式

@mixin key{
    position: relative;
    width: $width;
    height: $height;
    border: 1px solid $bgShadow;
    background: $bgColor;
    color: $color;
    
    @include border-radius(3px);
    
    vertical-align: top;
    list-style: none;
    text-align: center;
    display: inline-block;
    animation:moveBgShadow 0.5s 2s forwards;
    -moz-animation:moveBgShadow 0.5s 2s forwards; 
    -webkit-animation:moveBgShadow 0.5s 2s forwards; 
    -o-animation:moveBgShadow 0.5s 2s forwards; 
   // box-shadow: 5px 5px 5px $bgShadow;
    overflow: hidden;
}
.keyboard{
    //text-align: center;
    width: 854px;
    margin: 30px auto;
    overflow: hidden;
    
    .keyboardArea{
        position: relative;
        >ul{
            position: relative;
            margin-bottom: 10px;
            >li{
                @include key;
                >span{
                    display: block;
                    overflow: hidden;
                }
                .keySign{
                    box-shadow: 0px 20px 1px $bgShadow;
                    border: 1px solid $bgShadow;
                    height: 1px;
                    width: 8px;
                    position: absolute;
                    bottom: 10px;
                    left: 50%;
                    margin-left: -4px;
                }
                /*:after{
                    content: "";
                    position: absolute;
                    width: 2px;
                    height: 83px;
                    top: -17px;
                    left: -32px;
                    transform: rotate(40deg);
                    background: $lineHeight;
                    box-shadow: 0px 0px 16px $lineHeightShadow;
    
                    animation:moveLineHight 2s 1;
                    -moz-animation:moveLineHight 2s 1; 
                    -webkit-animation:moveLineHight 2s 1; 
                    -o-animation:moveLineHight 2s 1; 
                }*/
            }
            
            .active{
                background:$ativeColor;
                border-color: $ativeColor;
            }
            .errorKey{
                background:$errorColor;
                border-color: $errorColor;
            }
            
        }
        /*开机特效区*/
        .specialEffects0:before{
            content: "";
            position: absolute;
            width: 400px;
            height: 70px;
            left: -400px;
            top: -10px;
            background: #fff;
            box-shadow: 0px 0px 16px #d0d0d0;
            background-image: -webkit-linear-gradient(right, $bgShadow, $bgShadow*1.5);
            opacity: 1;
            animation:moveSpecialEffects0 1s 1;
            -moz-animation:moveSpecialEffects0 1s 1; 
            -webkit-animation:moveSpecialEffects0 1s 1; 
            -o-animation:moveSpecialEffects0 1s 1; 
        }
        .specialEffects1:before{
            content: "";
            position: absolute;
            width: 400px;
            height: 70px;
            left: 860px;
            top: -10px;
            background: #fff;
            box-shadow: 0px 0px 16px #d0d0d0;
            background-image: -webkit-linear-gradient(left, $bgShadow, $bgShadow*1.5);
            opacity: 1;
            
            animation:moveSpecialEffects1 1s 1;
            -moz-animation:moveSpecialEffects1 1s 1; 
            -webkit-animation:moveSpecialEffects1 1s 1; 
            -o-animation:moveSpecialEffects1 1s 1; 
        }
    }  
    .keyboardArea:before{
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
       // transform: rotate(40deg);
        background: #fff;
        box-shadow: 0px 0px 16px $bgShadow;
        background-image: -webkit-radial-gradient($bgShadow, $bgShadow*1.5);
        top: 50%;
        left: 50%;
        margin: -0px -0px; 
        
        border-radius: 50%;
        animation:moveSpecialEffects2 1.2s 1 .7s;
        -moz-animation:moveSpecialEffects2 1.2s 1 .7s; 
        -webkit-animation:moveSpecialEffects2 1.2s 1 .7s; 
        -o-animation:moveSpecialEffects2 1.2s 1 .7s; 
    }
      
}


/*@keyframes moveLineHight{
    0% {
        left: -400px;   
    }
    100% {
       left: 160px;  
    }
}*/
@keyframes moveSpecialEffects0{
     0% {
        left: -400px;   
        width: 400px;
    }
    55% {
       left: 27px;  
       width: 400px;
    }
    100% {
       left: 427px;  
       width: 0px;
       
    }
}
@keyframes moveSpecialEffects1{
     0% {
        left: 860px;   
        width: 400px;
    }
    55% {
       left: 427px;  
       width: 400px;
    }
    100% {
       left: 427px;  
       width: 0px;
      
    }
}
@keyframes moveSpecialEffects2 {
  0% {
    width: 1px;
    height: 1px; }
  10% {
    width: 100px;
    height: 70px; 
    opacity: 1;
    margin: -35px -50px; 
    }

  100% {
    width: 1200px;
    height: 800px;
   opacity: 0.5;
    margin: -400px -600px; } }
@keyframes moveBgShadow {
  0% {
    box-shadow:none; }

  100% {
    box-shadow: 5px 5px 5px $bgShadow; } }
.width12{
    @include width(1.2);
}
.width13{
    @include width(1.3);
}
.width14{
    @include width(1.4);
}
.width15{
    @include width(1.5);
}
.width16{
    @include width(1.6);
}
.width17{
    @include width(1.7);
}
.width18{
    @include width(1.8);
}
.width20{
    @include width(2);
}
.width275{
    @include width(2.625);  
}
.enterBoard{
    border-radius: 3px 3px 0 3px !important;
}
$enterDoenBottom:11px;
.enterDown{
    height:$height+$enterDoenBottom!important ;
    vertical-align: bottom;
    position: relative;
    top: -$enterDoenBottom;
    margin-bottom: -$enterDoenBottom;
    
    border-top: 1px solid transparent!important;
    border-radius:0 0 3px 3px!important;
    
}
//提示区样式
.promptArea{
    margin-bottom: 30px;
    position: relative;
    >ul{
        text-align: center;
        >li{
             @include key;
             margin: 0 4px;
        }
        .correctKey{
            background:$ativeColor;
            border-color: $ativeColor;
        }
        .waitPractice{
            background:$waitPractice;
            border-color: $waitPractice;
        }
    } 
    >p{
        color: red;
        height: 60px;
        line-height: 60px;
        position: absolute;
        top: 0;
        width: 99%;
        text-align: center; 
        background: rgba(0,0,0,0.5);
    }  
}
.efficiencyPrompt{
    text-align: left;
    margin-bottom: 20px;
    >ul{
        >li{
            list-style: none;
            display: inline-block; 
            margin-right: 10px;  
        }
    }
}
/*键盘音效处理区*/
.keyboardSound{
    display: inline-block;
    cursor: pointer;
    .soundNo{
        display: none;    
    }
    .soundVideo{
        display: none;
    }
    
}
